import 'package:flutter/material.dart';

import 'package:flutter_screenutil/flutter_screenutil.dart';

class CategoryPage extends StatefulWidget {
  CategoryPage({Key? key}) : super(key: key);

  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage>
    with AutomaticKeepAliveClientMixin {
  int _selectIndex = 0;

  @override
  Widget build(BuildContext context) {


    //获取计算后的宽度
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon:
                Icon(Icons.center_focus_weak, size: 28, color: Colors.black87),
            onPressed: null,
          ),
          title: InkWell(
            child: Container(
              height: 68.h,
              decoration: BoxDecoration(
                  color: Color.fromRGBO(233, 233, 233, 0.8),
                  borderRadius: BorderRadius.circular(30)),
              padding: EdgeInsets.only(left: 10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.search),
                  Text("笔记本", style: TextStyle(fontSize:28.sp))
                ],
              ),
            ),
            onTap: () {
              Navigator.pushNamed(context, '/search');
            },
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.message, size: 28, color: Colors.black87),
              onPressed: null,
            )
          ],
        ),
        body: Row(
          children: <Widget>[
            Container(
              width: 100.w,
              height:double.infinity,
              // color: Colors.red,
              child: ListView.builder(
                itemCount: 28,
                itemBuilder: (context, index) {
                  return Column(
                    children: <Widget>[
                      InkWell(
                        onTap: () {
                          setState(() {
                            _selectIndex = index;
                          });
                        },
                        child: Container(
                          width: double.infinity,
                          height: 56.h,
                          child:
                              Text("第${index}条", textAlign: TextAlign.center),
                          color:
                              _selectIndex == index ? Colors.red : Colors.white,
                        ),
                      ),
                      Divider()
                    ],
                  );
                },
              ),
            ),
            Expanded(
              //flex: 1,
              child: Container(
                  padding: EdgeInsets.all(10),
                  height: double.infinity,
                  color: Color.fromRGBO(240, 246, 246, 0.9),
                  child: GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                       // childAspectRatio: rightItemWidth / rightItemHeight,
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10),
                    itemCount: 18,
                    itemBuilder: (context, index) {
                      return InkWell(
                          onTap: () {
                            Navigator.pushNamed(context, '/productList',
                                // arguments: {"cid": this._rightCateList[index].sId});
                                arguments: {"cid": '自定义参数'});
                          },
                          child: Container(
                            // padding: EdgeInsets.all(10),
                            child: Column(
                              children: <Widget>[
                                AspectRatio(
                                  aspectRatio: 1 / 1,
                                  child: Image.network(
                                      "https://www.itying.com/images/flutter/list8.jpg",
                                      fit: BoxFit.cover),
                                ),
                                Container(
                                  height: 28.h,
                                  child: Text("女装"),
                                )
                              ],
                            ),
                          ));
                    },
                  )),
            )
          ],
        ));
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
